<template>
  <!-- 手机端  多张图片类的设置 菜单 轮播图 图片按钮 主播等-->
  <div style="width: 800px;" v-loading="loading">
    <div class="setting-box">
      <div class="area-item">
        <div class="top">

          <div style="margin-left:10px">
            <el-button icon="el-icon-plus" type="primary" size="small" @click="addACount(configArea)" class="zdy-btn zdy-btn-refresh">新增</el-button>
          </div>
        </div>
        <div class="set-cont table_box">
          <el-table ref="table" stripe :data="configArea.list" style="width: 100%">
            <el-table-column label="名称" prop="name" />
            <el-table-column label="跳转链接" prop="link" show-overflow-tooltip/>
            <el-table-column label="排序" prop="sort" />
            <el-table-column label="图片" prop="img">
              <template slot-scope="scope">
                <img style="height:32px" :src="scope.row.img" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" type="edit" @click="editItem(scope.row,scope.$index)">编辑</el-button>
                <el-button icon="el-icon-delete" type="del" @click="delItem(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog" @editSuccess="editSuccess" @addSuccess="addSuccess"></addDialog>
  </div>
</template>

<script>
import addDialog from "./phoneImgListSettingAddEditDialog.vue";
export default {
  name: "",
  components: { addDialog },
  props: ["configArea"],
  data() {
    return {
      loading: false,
      config: [],
      queryParams: {
        type: 2,
        tenantId: "",
      },
      editIndex: "",
    };
  },
  created() {
   
  },
  methods: {
  
    // 新增
    addACount(configArea) {
      if(configArea.list&&configArea.list.length>=10){
        return this.$message.error('最多只能添加10条！')
      }
      this.$refs.addDialog.open("add", configArea, this.configArea.modelKey);
    },
    // 编辑
    editItem(row, index) {
      // 查看详情
      this.editIndex = index;
      this.$refs.addDialog.open("edit", row, this.configArea.modelKey);
    },
    // 编辑回显
    editSuccess(row) {
      const list = [...this.configArea.list];
      list[this.editIndex] = { ...row };
      list.sort((a, b) => {
        return Number(a.sort || 0) - Number(b.sort || 0);
      });
      this.configArea.list = list;
      this.$refs.table.doLayout();
    },
    // 新增回显
    addSuccess(row) {
      const list = [...this.configArea.list];
      list.push(row);
      list.sort((a, b) => {
        return Number(a.sort || 0) - Number(b.sort || 0);
      });
      this.configArea.list = list;
      this.$refs.table.doLayout();
    },
    // 删除记录
    delItem(row,i) {
      this.configArea.list.splice(i,1)
      this.$message({
          type: "success",
          message: "删除成功!",
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.area-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 10px;
  .top {
    align-items: center;
    margin-bottom: 10px;
  }
  .tit {
    font-size: 16px;
    margin-right: 20px;
  }
  .sort {
    align-items: center;
    div {
      flex-shrink: 0;
    }
  }
}
</style>
